Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 390 | Author: cody 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Slide Down Mobile Menu</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>

<body>

    <div class="card">
        <div class="row" onclick="handleClick()" role="button" tabindex="0" aria-expanded="false"
            aria-label="Open Menu">
            <div class="title">MENU</div>
            <svg width="32" height="32" viewBox="0 0 100 100" class="icon">
                <path class="path1">
                    <animate class="animate1" attributeName="d" dur="0.35s" repeatCount="1" fill="freeze" />
                </path>
                <path class="path2">
                    <animate class="animate2" attributeName="d" dur="0.35s" repeatCount="1" fill="freeze" />
                </path>
                <path class="path3">
                    <animate class="animate3" attributeName="d" dur="0.35s" repeatCount="1" fill="freeze" />
                </path>
            </svg>
        </div>
    </div>

    <script>
        let isExpanded = false;

        const card = document.querySelector(".card");
        const row = document.querySelector(".row");
        const animate1 = document.querySelector(".animate1");
        const animate2 = document.querySelector(".animate2");
        const animate3 = document.querySelector(".animate3");

        // Keyframes
        const values1 = [
            "M 84,24 C 84,24 61.333333,24.001 50,24.001 38.666667,24.001 16,24 16,24",
            "M 82,24 C 82,24 66.957389,30.5 50,30.5 33.042611,30.5 18,24 18,24",
            "M 80,24 C 80,24 61.663104,37 50,37 38.336896,37 20,24 20,24",
            "M 78,24 C 78,24 55.685686,43.5 50,43.5 44.314314,43.5 22,24 22,24",
            "M 76,24 C 76,24 50.055365,50 50,50 49.94463,50 24,24 24,24"
        ];
        const values2 = [
            "M 84,50 H 50 16",
            "M 75.5,50 H 50 24.5",
            "M 67,50 H 50 33",
            "M 58.5,50 H 50 41.5",
            "M 50.001,50 H 50 49.99"
        ];
        const values3 = [
            "M 84,76 C 84,76 61.333333,76.001 50,76.001 38.666667,76.001 16,76 16,76",
            "M 82,76 C 82,76 66.957389,69.5 50,69.5 33.042611,69.5 18,76 18,76",
            "M 80,76 C 80,76 61.663104,63 50,63 38.336896,63 20,76 20,76",
            "M 78,76 C 78,76 55.685686,56.5 50,56.5 44.314314,56.5 22,76 22,76",
            "M 76,76 C 76,76 50.055365,50 50,50 49.944635,50 24,76 24,76"
        ];

        function toggleAnimation(values, animate) {
            animate.setAttribute(
                "values",
                !isExpanded ? values.join("; ") : values.slice().reverse().join("; ")
            );
            animate.beginElement();
        }

        function handleClick() {
            isExpanded = row.getAttribute("aria-expanded") === "true";

            if (isExpanded) {
                card.classList.remove("active");
            } else {
                card.classList.add("active");
            }

            toggleAnimation(values1, animate1);
            toggleAnimation(values2, animate2);
            toggleAnimation(values3, animate3);

            row.setAttribute("aria-expanded", !isExpanded);
            row.setAttribute("aria-label", !isExpanded ? "Close Menu" : "Open Menu");
        }

        function initPath(card, descriptor) {
            const path = document.querySelector(card);
            path.setAttribute("d", descriptor);
        }

        initPath(".path1", values1[0]);
        initPath(".path2", values2[0]);
        initPath(".path3", values3[0]);

        row.addEventListener("keydown", (event) => {
            if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                row.click();
            }
        });
    </script>

</body>

</html>

Share this file: